<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <div class="top">
        <div style="font-size: 45px; margin-top: 20px">
          学生情况大屏<el-button
            type="text"
            @click="goNew"
            style="text-decoration: underline"
            >跳转到新页面</el-button
          >
          <span class="show-stu"
            >当前展示学生(学号)：{{ currentStudent.stuName || "--" }}({{
              currentStudent.stuId || "--"
            }})</span
          >
        </div>
        <div class="logout">
          <el-button type="primary" @click="logOut">退出</el-button>
        </div>
      </div>
      <peerReview :allData="allData" :currentStudent="currentStudent" :dictData="dictData" />
      <studentInfo
        :allData="allData"
        :dictData="dictData"
        @changeItem="changeStu"
      />
      <studentScore :allData="allData" :dictData="dictData" :currentStudent="currentStudent"/>
      <allStudentScore :allData="allData" :dictData="dictData" /> 
      <compareRecord :allData="allData" :currentStudent="currentStudent" :dictData="dictData" /> 
      <teacherEval :allData="allData" :dictData="dictData" :currentStudent="currentStudent"/>
      <expertJointEval :allData="allData" :dictData="dictData" :currentStudent="currentStudent"/>
      <!-- <platformEval :allData="allData" :dictData="dictData" /> -->
    </div>
  </div>
</template>

<script>
import { screenSize } from "@/assets/js/utils";
import { getStudentInfo, listScoreInfo, classScore } from "@/api/stuInfo";
import { getScoreList } from "@/api/scoreList";
import { listData } from "@/api/dict/data";
import Cookies from "js-cookie";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        stuId: null,
      },
      allData: [],
      classData: [],
      dictData: [],
      typeList: [
        { key: "0", value: "peer_review" },
        { key: "1", value: "teacher_eval" },
        { key: "2", value: "expert_joint_eval" },
        { key: "3", value: "platform_eval" },
        { key: "4", value: "supervisor_eval" },
      ],
      currentStudent: {}
    };
  },
  computed: { 
  },
  created() {
  },
  mounted() {
    screenSize(this.$refs.editor);
    getStudentInfo({
      pageNum: this.queryParams.pageNum,
      pageSize: this.queryParams.pageSize,
    }).then((res) => {
      const firstRow = res.rows.length > 0 ? res.rows[0] : {};
      this.currentStudent = firstRow
      // this.getClassScore(firstRow.grade);
      listData({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }).then((resp) => {
        this.dictData = resp.rows || [];
        this.getScores(firstRow.stuId);
      }); 
      this.getAllScoreList();
    });
  },
  methods: {
    changeStu(item) {
      this.currentStudent = item
      // this.getScores(item.stuId);
      // this.getClassScore(item.grade);
    },
    getAllScoreList() {
      const queryParams = {
        pageNum: 1,
        pageSize: 500 
      } 
      getScoreList(queryParams).then((res) => {
        this.allData = res.rows || [];
      });
    },
    getScores(stuId) {
      // this.queryParams.stuId = stuId;
      // listScoreInfo(this.queryParams).then((res) => {
      //   this.allData = this.formatData(res.rows, "") || [];
      // });
    },
    getClassScore(classId) {
      classScore({
        classId: classId,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      }).then((res) => {
        this.classData = this.formatData(res.rows, "class") || [];
      });
    },
    formatData(data, form) {
      return data.map((el) => {
        el.score = el.score.split(",");
        const fItem = this.typeList.find((f) => f.key === el.scoreType);
        const dicts =
          form === "class"
            ? this.dictData.filter((d) => d.dictType === "class_overall_eval")
            : this.dictData.filter((d) => d.dictType === fItem.value);
        el.subjectName = el.subjectName.split(",").map((el) => {
          const item = dicts.find((f) => f.dictValue === el) || {};
          return item.dictLabel || "";
        });
        return el;
      });
    },
    logOut() {
      this.$store
        .dispatch("LogOut", this.loginForm)
        .then(() => {
          this.$router.push({
            path: "/login",
          });
          Cookies.remove("username");
        })
        .catch(() => {});
    },
    goNew() {
      this.$router.push({
         path: "/homeNew",
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  .wrap {
    transform-origin: 0px 0px 0px;
    background: url(../assets/img/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: auto;
    .top {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 80px;
      background-color: transparent;
      background: url(../assets/img/images/title.png) no-repeat;
      background-position: 50% 0;
      border: none;
      overflow: hidden;
      color: white;
      font-size: 40px;
      // margin-top: 30px;
      text-align: center;
      // margin-left: 80px;
    }
    .divider {
      position: absolute;
      left: 50px;
      top: 3253px;
      width: 90%;
      height: 50px;
      width: 300px;
      border: none;
      background: transparent;
    }
  }
}

.show-stu {
  position: absolute;
  font-size: 20px;
  top: 15px;
  right: 170px;
}

.logout {
  position: absolute;
  right: 20px;
  top: 2px;
}
</style>
